<template>
  
   <el-container>
     <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
   
    </el-container> 

    
</template>

<script>
export default {
   data() {
        return {
             tableData3:[],
             currentPage:1,
             pageSizes:[1, 2, 3, 4],
             pageSize:1,
             total:5

        }
    },mounted(){
       this.requestData();

    },methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
        requestData(){
           var api = "http://localhost:8081/vue/main";
           var params = {
                pageNum:this.currentPage,
                pageSize:this.pageSize
            }
           this.$http.get(api,{params:params}).then(response =>{
                 console.log(response);
                 this.tableData3 = response.body.result;
                 this.total = response.body.total;
            }, response => {
           
        });
            
        }
    }
}
</script>


  
  